<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Vue-视频</title>
    <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
    <style type="text/css">
      #main {
          margin: 0 0;
          width: 100%;
          height: 100vh;
      }
      #map {
          height: 100vh;
          width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <mapgis-web-map
        id="map"
        :map-style="mapStyle"
        :zoom="mapZoom"
        :center="outerCenter"
        :crs="mapCrs"
        v-on:load="handleMapLoad"
        >
        <mapgis-ogc-wmts-layer
          :layer-id="layerWmtsId"
          :source-id="sourceWmtsId"
          :base-url="wmtsurl"
          :tile-matrix-set="tileMatrixSet"
          :wmts-layer="layer"
          :format="format"
          :token="token">
        </mapgis-ogc-wmts-layer>
        <mapgis-video-layer
          :source="videoSource"
          :source-id="videoSourceId"
          :layer="videoLayer"
          :layer-id="videoLayerId">
        </mapgis-video-layer>
</mapgis-web-map>
</div>
<script>
  new Vue({
      el: '#app',
      data() {
          return {
              mapStyle: {
                  version: 8,
                  sources: {},
                  layers: []
              },
              mapZoom: 17,
              outerCenter: [-122.514426, 37.562984],
              mapCrs: 'EPSG:3857',

              layerWmtsId: 'ogcwmts_layerId',
              sourceWmtsId: 'ogcwmts_sourceId',
              wmtsurl: 'http://t0.tianditu.gov.cn/vec_c/wmts',
              layer:"vec",
              tileMatrixSet:"c",
              format:"tiles",
              token: {
                            key: 'tk',
                            value: 'f5347cab4b28410a6e8ba5143e3d5a35'
                        },

              videoSourceId: "videosource",
              videoSource: {
                  'type': 'video',
                  'urls': [
                      '../../static/data/video/drone.mp4',
                      '../../static/data/video/drone.webm'
                  ],
                  'coordinates': [
                      [-122.51596391201019, 37.56238816766053],
                      [-122.51467645168304, 37.56410183312965],
                      [-122.51309394836426, 37.563391708549425],
                      [-122.51423120498657, 37.56161849366671]
                  ]
              },
              videoLayerId: 'videoid',
              videoLayer: {
                  "type": "raster",
                  "source": "videosource", //必须和上面的videosource一致
              }
          };
      },
      methods: {
          handleMapLoad(payload) {
              this.map = payload.map;
          }
      }
  });
</script>
</body>
</html>
